<template>
    <q-dialog v-model="detail"  >
        <OrderDetailPage :part-id="partId" :order-id="orderId"></OrderDetailPage>
    </q-dialog>
    <q-dialog v-model="repairingDetail" >
      <MyBigDialog title="Repairing Detail">
        <FinalCheckForm class="q-pa-md" mode="report" :is-parent="isParent" :serial-no="serialNo" :stock-code="stockCode" :order-id="orderId"></FinalCheckForm>
      </MyBigDialog>
    </q-dialog>
    <ReportPage>
      <q-table
          class="my-table card-radius"
          wrap-cells
          flat
          bordered
          title="Regular check management,e.g.card with battery Report"
          titleClass="page-header"
          :pagination="{ rowsPerPage: 50 }"
          row-key="id"
          no-data-label="No data found."
          no-results-label="The filter didn't uncover any results"
           :columns="DataForm.data.columns"
            :rows="DataForm.data.rows" 
            >
            <template v-slot:top-right>
        <q-card-actions>
          <q-btn
            class="default-btn"
            label="Search"
            no-caps
            @click="searchbtn"
          />
        </q-card-actions>
      </template>
                <template v-slot:top-row="props">
                    <q-td>
                        <!-- {{ props.cols[0].label }} -->
                        <q-input borderless :label="props.cols[0].label" dense v-model="query.data.serial_no" filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>
                    <q-td>
                        <q-input borderless :label="props.cols[1].label" dense v-model="query.data.stock_code" filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>
                    <q-td>
                        <q-input borderless :label="props.cols[2].label" dense v-model="query.data.description" filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>

                    <q-td>
                        <q-input borderless :label="props.cols[3].label" dense v-model="query.data.cycle_month" filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>

                    <q-td>
                        <q-input borderless :label="props.cols[4].label" dense v-model="query.data.incoming_cycle_month"
                            filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>
                </template>
            </q-table>
    </ReportPage>
    <q-dialog class="Search"  v-model="searchdig">
        <q-card>
        <q-toolbar class="popup-header">
            <q-toolbar-title  class="q-ma-md cap">
                Search
            </q-toolbar-title>
            <q-space />
                <q-btn
                icon="close"
                size="lg"
                flat
                round
                dense
                v-close-popup
                />
            </q-toolbar>
            <q-card-section class="q-gutter-y-sm row">
                <q-item-label class="col-4 fal">Serial No.:</q-item-label>
                <q-input
                borderless
                v-model="searchForm.data.serial_no"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Stock Code:</q-item-label>
                <q-input
                borderless
                v-model="searchForm.data.stock_code"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Short Description:</q-item-label>
                <q-input
                borderless
                v-model="searchForm.data.description"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">In Service Time(Month):</q-item-label>
                <q-input
                borderless
                v-model="searchForm.data.cycle_month"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Remaining Service Time (Month):</q-item-label>
                <q-input
                borderless
                v-model="searchForm.data.incoming_cycle_month"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <div style="width: 100%;display: flex; justify-content: center;align-items: center;">
                    <q-btn class="default-btn" style="height: 32px;" @click="getlist">Sumbit</q-btn>
                </div>
            </q-card-section>
        </q-card>
    </q-dialog>
  </template>
  
  <script setup lang="ts">
  import ReportPage from 'src/pages/ReportPage.vue';
  import { computed, ref ,reactive,onMounted,watch} from 'vue';
  import { QTableColumn, useQuasar } from 'quasar';
  import { exportTable } from 'src/utils/exportCsvUtils';
  import { repairOrderHistory } from 'src/services/reportService';
  import { formatDateTimeString } from 'src/utils/dateUtils';
  import { useRouter } from 'vue-router';
  // import ObsolescenceTip from '../ObsolescenceTip.vue';

import { RegularCheckList, RegularCheck } from 'src/services/type';
import { get_reguar_check_management_list } from 'src/services/SpareLocationReport';
const query = reactive<{
    data: RegularCheck;
}>({
    data: {
        serial_no: '',
        stock_code: '',
        description: '',
        cycle_month: '',
        incoming_cycle_month: ''
    }
})

const searchForm = reactive<{ data: RegularCheck }>({
    data: {
        serial_no: '',
        stock_code: '',
        description: '',
        cycle_month: '',
        incoming_cycle_month: ''
    }
}
)

const DataForm = reactive<{
    data: RegularCheckList;
}>({
    data: {
        rows: [],
        columns: [
            {
                name: 'serial_no',
                label: 'Serial No',
                field: 'serial_no',
                align: 'center',
                sortable: true,
            },
            {
                name: 'stock_code',
                label: 'Stock Code',
                field: 'stock_code',
                align: 'center',
                sortable: true,
            },
            {
                name: 'short_description',
                label: 'Short Description',
                field: 'description',
                align: 'center',
                sortable: true,
            },
            {
                name: 'cycle_month',
                label: 'Cycle Month',
                field: 'cycle_month',
                align: 'center',
                sortable: true,
            },
            {
                name: 'incoming_cycle_month',
                label: 'Incoming Cycle Month',
                field: 'incoming_cycle_month',
                align: 'center',
                sortable: true,
            },
        ]
    }
});
watch(query.data, () => {
    // 调用筛选函数
    resportlist();
});
const searchdig=ref(false)
const reportlist = ref<Array<RegularCheck>>([])
async function resportlist() {
    DataForm.data.rows = reportlist.value.filter(item => {
        console.log(query.data);
        return (
            item.serial_no.includes(query.data.serial_no) &&
            item.stock_code.includes(query.data.stock_code) &&
            item.description.includes(query.data.description) &&
            (query.data.cycle_month === '' || item.cycle_month <= query.data.cycle_month) &&
            (query.data.incoming_cycle_month === '' || item.incoming_cycle_month <= query.data.incoming_cycle_month)
        );
    })
}

async function searchbtn() {
    searchForm.data.serial_no=''
    searchForm.data.stock_code=''
    searchForm.data.description=''
    searchForm.data.cycle_month=''
    searchForm.data.incoming_cycle_month=''
    searchdig.value=true
}

async function getlist() {
    const res = await get_reguar_check_management_list(searchForm.data);
    DataForm.data.rows = res.data.data;
    reportlist.value = res.data.data;
}
onMounted(() => {
    getlist()
});
  const $q = useQuasar();
  
  /* const = ref() */
  const orderId = ref(0)
  const partId = ref(0)
  const serialNo = ref('')
  const stockCode = ref('')
  const isParent = ref(false)
  
  const searchDig = ref(false)
  
  const detail = ref(false)
  const repairingDetail = ref(false)
  
  const rows = ref<RepairOrderHistory[]>()
  
  async function search(form: { data: HistorySearch}){
    showLoading()
    const res =  await repairOrderHistory(form.data)
    console.log(res);
    rows.value = res
    searchDig.value = false
    $q.loading.hide()
  }
  
  
  function showLoading() {
    $q.loading.show({
      message: 'Doing something. Please wait...',
      boxClass: 'bg-grey-2 text-grey-9',
      spinnerColor: 'primary',
    });
  }
  
  function openOrderDetail(order_id: number, part_id:number){
    detail.value = true
    orderId.value =order_id
    partId.value =part_id
  }
  
  function openRepairingDetail(order_id: number, stock_code: string, serial_no: string, is_parent: boolean){
    repairingDetail.value = true
    orderId.value = order_id
    stockCode.value = stock_code
    serialNo.value = serial_no
    isParent.value = is_parent
    
  }
  
  const router = useRouter();
  
  function onRowClick(evt: any, row: any) {
    router.push(`/maintenance/order/${row.id}`);
  
  }
  
  const colsFilter = ref<typeof ColsFilter>();
  
  function filterFn(row: RepairOrderHistory) {
    if (colsFilter.value) {
      return colsFilter.value.filterFn(row);
    }
  }
  
  const filterRows = computed(() => {
    return rows.value?.filter(filterFn);
  });
  
  // function dblclickFn(evt: any, row: RepairOrderHistory, index: number) {
  //   id.value = row.id ;
  //   part_id.value = row.part_id ;
  //   detail.value = true;
  // }
  </script>
  
  <style scoped></style>
  